<template>
    <div>
        <el-row :gutter="6">
            <el-col :span="4">
                <div class="user-lable-wrap user-key-work">
                    <label for="">关键字:</label>
                    <div class="wrap-content">
                        <!-- 组件传参 -->
                        <seleteKey :config="data.configOption" ></seleteKey>
                    </div>
                </div>
            </el-col>
                <seleteBox></seleteBox>
            <el-col :span="6">
                <el-button class="pull-right" type="danger" @click="dialog_user = true">添加用户</el-button>
            </el-col>
        </el-row>
        <hr style="margin:20px 0;">
        <!-- 表格组件 -->
        <tableUser :config="data.configTable">
            <!-- 具名插槽,指定 -->
            <!--原#status  添加slot-scoped :data=""之后 -->
            <template v-slot:status = "slotData">
                <el-switch v-model="slotData.data.name" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </template>
            <template v-slot:operation="slotData">
                <el-button type="text" size="small" @click="operation(slotData.data)">编辑</el-button>
                <el-button type="text" size="small" @click="operation(slotData.data)">删除</el-button>
            </template>
        </tableUser>

        <div class="pageName">
            <el-row>
                <el-col :span="12">
                    <el-button size="medium">批量删除</el-button>
                </el-col>
                <el-col :span="12">
                    <el-pagination
                        class="pull-right"
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="[10, 20, 50, 100]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="20">
                    </el-pagination>
                </el-col>
            </el-row>
        </div>
        <!--新增弹窗 -->
        <dailogUser :flag.sync="dialog_user" @close="closeDailog"></dailogUser>
    </div>
</template>

<script>
import { reactive ,ref } from '@vue/composition-api';
import seleteKey from "../../components/Selete/selete";
// import seleteKey from "../../components/Selete/selete2.0";
import { QiniuToKen } from "../../api/common";
import dailogUser from "../../views/User/dailog/add";
import tableUser from "../../components/TableUser/table";
import seleteBox from "../../components/SeleteBox/seletebox";
export default {
    name: "userIndex",
    components: {
        seleteKey,seleteBox,dailogUser,tableUser
    },
    setup(props,{ root,refs }){
        const dialog_user = ref(false);   //触发true、false的切换
        const data = reactive({
            configOption: {
                init: ["name", "phone"]
            },
            // table组件配置参数
            configTable:{
               
                //自定义传key值
                table_head:[
                    { 
                        label: "邮箱/用户名",
                        field: "username",
                        width: 180,
                        fixed: "left"
                    },
                    { 
                        label: "姓名",
                        field: "truename",
                        width: 120
                    },
                    { 
                        label: "手机号",
                        field: "phone",
                        width: 150
                    },
                    { 
                        label: "地区",
                        field: "region",
                        width: 380
                    },
                    { 
                        label: "角色",
                        field: "role",
                        width: 80
                    },
                    { 
                        label: "禁启用状态",
                        field: "status",
                        //插槽类型
                        columnType: "slot",
                        slotName: "status",
                        width: 120,
                        fixed: "right"
                    },
                    { 
                        label: "操作",
                        // field: "code",
                        columnType: "slot",
                        slotName: "operation",
                        width: 100,
                        fixed: "right"
                    }                     
                ],
                 //多选框
                seletion: false,
                // recordCheckbox: true,

                //请求接口
                // requestData: {
                //     url: "getUserList",
                //     method: "post",
                // }

            }
        })

        /**
         * 方法 mehtods
         */
        // 初始化table配置项 // const声明对象或 数组
        // 匹配相同的key，如果存在，则替换
        // const = () => {
        //     let configData = props.config;
        //     let keys = Object.keys(data.tableConfig);
        //     for(let key in configData) {
        //         if(keys.includes(key)){  //  ["selection", "recordCheckbox", "requestUrl", "tHead"].includes("selection")
        //             data.tableConfig[key] = configData[key];
        //         }
        //     }
        // }
        const operation = ((params)=>{
            console.log(params, 'operation')
        })
        const closeDailog = (()=>{
            // console.log(dialog_user.value, 'closeDailog')
            dialog_user.value = false
        })
        const handleSizeChange =((val) =>{
            console.log(val);
        })
        const handleCurrentChange = ((val) =>{
            console.log(val);
        })
        return{
            data,dialog_user,closeDailog,
            handleSizeChange,handleCurrentChange,
            operation
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../../styles/config.scss";
@import "../../styles/main.scss";
.user-lable-wrap{
    &.user-key-work { @include lableDemo(left, 40, 55); }
}
.pageName{
    margin-top: 18px    ;
}
/******************************************************************************
组件化，页面开发组件是页面组成的一部分，是一个具有独立逻辑和功能或界面，同时根据规定的接口规则进行融合，简单理解是，
把页面分拆成不同的小模块，在重新组合
高内聚性
低藕合度
组件三要素，props（组价属性参数） event（自定义事件触发组件事件，经常回调父组件方法） slot（用于组件功能的扩展，父组件的内容传入子组件，在子组件中显示）
 */
</style>

<!--
初始化的数据，不需要监听，
可以在挂载之前预先处理。
-->

<!--
v-slot插槽：父组件传内容到子组件显示
1、匿名插槽：没有指定某一个插槽，全部都显示
2、具名插槽：指定插槽显示内容
3、作用域插槽：可以进行数据绑定，父子组件通讯
-->